<template>
  <div>
    <h3>视频管理</h3>
    <div class="search">
      视频标题
      <el-input
          v-model="queryParam.name"
          style="width: 240px"
          placeholder="请输入视频标题"
          clearable
      />
      <el-button type="primary" @click="handleSearchAllVideo">搜索</el-button>
    </div>

    <el-table :data="dataList" border style="width: 100%">
      <el-table-column prop="videoId" label="用户id" width="100" />
      <el-table-column prop="videoTitle" label="视频标题"  show-overflow-tooltip width="196" />
      <el-table-column prop="videoCover" label="视频封面" width="150" align="center">
        <template #default="scope">
          <el-image :src="scope.row.videoCover" fit="cover" style="width: 100px;height: 60px"/>
        </template>
      </el-table-column>
      <el-table-column prop="videoUrl" label="视频地址" show-overflow-tooltip width="150" />
      <el-table-column label="视频简介" show-overflow-tooltip width="220">
        <template #default="scope">
          {{scope.row.videoIntroduction}}
        </template>
      </el-table-column>
      <el-table-column prop="videoOwnerId" label="视频作者id" width="120" />
      <el-table-column label="操作" align="right" width="120">

        <template #default="scope">
          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row)"
          >
            删除
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <div class="pagination_sign">
      <el-pagination background layout="prev, pager, next"
                     @current-change="handleCurrentChange"
                     v-model:current-page="curPage"
                     v-model:page-size="queryParam.size"
                     :total="total" />
    </div>

    <!-- 当点击删除时显示提示框 -->
    <el-dialog
        v-model="dialogVisible"
        title="删除视频"
        width="500"
    >
      <!--      :before-close="handleClose"-->
      <span>你确定要删除id为{{targetData.videoId}}视频吗？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handlerConfirm">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import {useRouter} from 'vue-router';

import {ElMessage} from 'element-plus'
import {removeVideoById, videoPageQuery} from "@/api/admin-api.js";

const router = useRouter()
let dataList = ref([])
let total = ref(0)
let curPage = ref(1)
// 查询操作
// 查询所有用户
let handleSearchAllVideo = async () => {
  await getVideoData()
}

/**
 * 页面挂载时获取数据
 */
const queryParam = reactive({
  name:'',
  page:1,
  size:5,
})

const getVideoData = async () => {
  // console.log(res.data);
  const res = await videoPageQuery(queryParam)
  console.log(res)
  total.value = res.data.total
  // 赋值
  dataList.value = res.data.records
}
onMounted( async ()=>{
  await getVideoData()
})

const handleCurrentChange = async (val) => {
  queryParam.page = val
  await getVideoData()
}

/**
 * 删除操作
 * @param {*} index
 * @param {*} row
 */
let targetData = ref()
const dialogVisible = ref(false)

/* 确认删除 */
const handlerConfirm = async () =>{
  // targetData 是本条记录
  console.log(targetData.value);
  try {
    const { videoId } = targetData.value
    // 根据id删除
    await removeVideoById(videoId)
    // 关闭弹出框
    dialogVisible.value = false
    console.log("删除成功");
    ElMessage.success("删除成功")
    // 获取数据
    await handleSearchAllVideo()
  }catch (e) {
    ElMessage.error("删除失败："+e.message)
  }
}

const handleDelete = (row) => {
  targetData.value = row
  //删除之前，提示
  dialogVisible.value = true

}

</script>
<style lang="scss" scoped>
.search,{
  box-sizing: border-box;
  padding: 10px 0;
}
.add{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.pagination_sign{
  width: 100%;
  position: absolute;
  top: 560px;
  display: flex;
  justify-content: center;
}
</style>
